<template>
  <cube-scroll
    ref="list"
    class="list"
    :data="list"
    :options="options"
    @pulling-down="init"
    @pulling-up="getMore">
    <ul class="article-list">
      <p class="loading-row" v-if="firstLoad">加载中</p>
      <li
        v-for="(item, index) in list"
        :key="index"
        class="article"
        @click="goDetail(item)">
        <h3 class="article-title">{{item.title | parseText(17)}}</h3>
        <p class="article-summary">{{item.summary | parseText(100)}}</p>
        <div class="article-bottom flex justify-content-space-between align-items-center">
          <div>
            <span class="article-source">{{item.source}}</span>
            <span class="article-time">{{item.postedAt | parseTime}}</span>
          </div>
          <i class="iconfont icon-share" @click="showShare(item, $event)"></i>
        </div>
      </li>
      <li class="no-data" v-show="noData">暂无数据</li>
    </ul>
  </cube-scroll>
</template>
<script>
import * as util from '@/assets/js/util'

const size = 10

export default {
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      total: null,
      curPage: 1,
      hasMore: true,
      noData: false,
      options: {
        pullDownRefresh: {
          txt: '更新成功'
        },
        pullUpLoad: {
          txt: {
            noMore: '最后一页了'
          }
        }
      },
      firstLoad: true
    }
  },
  methods: {
    goDetail (target) {
      if (target.textSolid && target.textSolid[0] === '') {
        this.$router.push({
          name: 'OpinionView',
          query: {
            url: target.url || ''
          }
        })
      } else {
        this.$router.push({
          name: 'OpinionDetail',
          query: {
            id: target.id || ''
          }
        })
      }
    },
    showShare (target, event) {
      const link = target.url || ''
      this.$store.commit('showShare', link)
      event.stopPropagation()
    },
    init () {
      this.curPage = 1
      this.hasMore = true
      this.noData = false
      this.$refs.list.scrollTo(0, 0)
      this.getList(this.curPage).then(res => {
        const data = res.data.data
        this.list = data.slice(0)
        this.checkMore()
        this.firstLoad = false
        this.$store.commit('setLoading', false)
      })
    },
    getMore () {
      if (!this.hasMore) {
        this.$refs.list.forceUpdate()
        return
      }
      this.curPage++
      this.getList(this.curPage).then(res => {
        const data = res.data.data
        this.list = this.list.concat(data.slice(0))
      })
    },
    getList (page) {
      const { dimension, attribute, property, startTime, endTime, source, cityName, companys } = this.$parent.filterConditions
      const time = util.getTime(startTime, endTime, true)
      return new Promise((resolve, reject) => {
        this.$http.get('/main/getHeadline', {
          startTime: time.startTime,
          endTime: time.endTime,
          size,
          page,
          module: util.getModule(dimension),
          dimension,
          attribute,
          property,
          source,
          cityName,
          companys,
          keyword: this.keyword,
          searchType: 1
        })
          .then(res => {
            const count = res.data.count
            this.total = count
            resolve(res)
          })
      })
    },
    checkMore () {
      if (this.list.length === 0) {
        this.noData = true
      }
      if (this.curPage > Math.ceil(this.total / size)) {
        this.hasMore = false
      }
    },
    search () {
      this.init()
    }
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.list.refresh()
    })
  }
}
</script>
<style lang="less" scoped>
  @import "./style.less";
</style>
